<template>
<div style="height:570px;">

    <el-aside style="width: 200px;margin-top: 20px;height:auto;">
      <SideMenu @indexSelect="listByCategory" ref="sideMenu"></SideMenu>
    </el-aside>
    <div>
      <Blogs class="books-area" ref="blogsArea"></Blogs>
    </div>
    <div style="width: 200px;margin-top: 20px;height:auto;float:right;margin-right:190px;">
     <Notice></Notice>
    </div>
  </div>
</template>

<script>
import Notice from './Notice'
import SideMenu from './SideMenu'
import Blogs from './Blogs'
 export default {
   name: 'BlogIndex',
   components:{SideMenu,Notice,Blogs},
   data () {
     return {

     }
   },
   mounted () {},
   methods: {
        listByCategory () {
                var _this = this
                var cid = this.$refs.sideMenu.cid;
                var url = '/blog/' + 4 + '/' + 1 + '/' +cid
                this.$axios.get(url).then(resp => {
                  if (resp && resp.data.code === 200) {
                    _this.$refs.blogsArea.blogs = resp.data.data.records
                    _this.$refs.blogsArea.total = resp.data.data.total
                    _this.$refs.blogsArea.currentPage = 1
                    _this.$refs.blogsArea.cid = cid;
                  }
                })
              }
   }
 }
</script>

<style lang="css" scoped>
 .blog-area {
    width: 990px;
    margin-left: auto;
    margin-right: auto;
  }
</style>
